<template>
  <div style="margin-bottom: 75px">
    <!--歌曲列表-->
    <el-table :data="songList" ref="playTable" highlight-current-row border stripe
              style="cursor: context-menu;" @row-dblclick="playMusic">

      <el-table-column label="#" type="index">
        <template scope="scope">
          <img v-if="curId === scope.row.id" src="imgs/isPlay.png" alt="">
          <p v-else>{{ scope.$index + 1 }}</p>
        </template>
      </el-table-column>


      <el-table-column v-if="false" label="id" prop="id"></el-table-column>

      <el-table-column label="音乐标题" prop="name">
        <template scope="scope">
          <span
              :title="scope.row.alias.length===0?scope.row.name:scope.row.name+'('+scope.row.alias[0]+')'"
              style="font-size: 15px;font-weight: 500;width: 200px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
                                    {{  scope.row.name  }}
                                </span>
          <span v-if="scope.row.alias.length">{{ scope.row.alias.length === 0 ? '' : '(' + scope.row.alias[0] + ')' }}</span>
          <span v-if="scope.row.fee===1"
                style="box-shadow: 0px 0px 5px 2px rgba(255,103,0,0.1);padding: 0 2px;
                border: solid 1px #ff6700;color: #ff6700;border-radius: 5px;margin-right: 10px;user-select: none">
            {{scope.row.fee===1?'VIP':''}}</span>
        </template>
      </el-table-column>

      <el-table-column label="歌手" width="80px;">
        <template scope="scope">
                <span v-for="(item,index) in scope.row.artists" style="cursor: pointer" @click="toSingerPage(item.id)">
                    {{
                    index === 0 && scope.row.artists.length > 1 && index !== scope.row.artists.length - 1
                        ? item.name + '/' : item.name
                  }}
                </span>
        </template>
      </el-table-column>

      <el-table-column label="专辑名" prop="album.name"></el-table-column>

      <el-table-column label="时长" prop="duration" width="80px;"></el-table-column>

    </el-table>
    <!--分页-->
    <el-pagination
        layout="prev, pager, next" :page-size="queryInfo.limit"
        :total="songTotal" @current-change="handleCurrentChange">
    </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      searchData: decodeURIComponent(this.$route.params.data),
      //当前的搜索条件
      queryInfo: {
        keywords: this.$route.params.data,
        limit: 30,
        offset: 0,
        type: 1
        /* type
            默认为1
            1: 单曲 100:歌手 1000:歌单 1014:视频
        */
      },
      //查询结果总数
      songTotal: 0,
      //歌曲数的结果集
      songList: [],
      //父组件当前播放的音乐的id
      curId: parseInt(window.localStorage.getItem('curPlayMusicId')),
    }
  },
  created() {
    //获取搜索结果集
    this.getSearchResult()
    //注册监听的事件 在main.js中定义了
    window.addEventListener('setItem', () => {
      this.curId = parseInt(localStorage.getItem('curPlayMusicId'))
    })
  },
  methods: {
    getSearchResult() {
      this.$http.get('/search', {params: this.queryInfo}).then(res => {
        this.songList = res.data.result.songs
        this.songTotal = res.data.result.songCount
        //处理时长dt
        this.songList.forEach(item => {
          var time = item.duration / 1000
          //分钟
          var minute = time / 60;
          var minutes = parseInt(minute);
          if (minutes < 10) {
            minutes = "0" + minutes;
          }
          //秒
          var second = time % 60;
          var seconds = Math.round(second);
          if (seconds < 10) {
            seconds = "0" + seconds;
          }
          item.duration = `${minutes}:${seconds}`;
        })
      })
    },
    //双击歌曲添加数据进去,并循环播放(向父组件传递参数)
    playMusic(row) {
      this.$http.get('song/url', {params: {id: row.id}}).then(res => {
        if (res.data.data[0].url !== '') {
          this.$http.get('song/detail', {params: {ids: row.id}}).then(r => {
            this.$emit('setMusicUrl', res.data.data[0].url, r.data.songs[0])
          })
        }
      })
    },
    //分页插件页数改变
    handleCurrentChange(newPage) {
      this.queryInfo.offset = (newPage - 1) * this.queryInfo.limit
      if (this.queryInfo.offset >= this.songTotal) this.queryInfo.offset = this.songTotal
      this.getSearchResult();
    },
    //跳转歌手
    toSingerPage(id) {
      this.$router.push('/singer/' + id)
    }
  }
}
</script>

<style scoped>

</style>
